<%-- 
    Document   : mapa
    Created on : 25-nov-2013, 17:23:23
    Author     : Natalia
--%>
<%@page import="beans.Controlador"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <style>
            html, body, #map-canvas {
              height: 100%;
              margin: 0px;
              padding: 0px
            }
          </style>
        <style>
        #results {
          font-family: Arial, Helvetica, sans-serif;
          position: absolute;
          right: 5px;
          top: 50%;
          margin-top: -195px;
          height: 380px;
          width: 200px;
          padding: 5px;
          z-index: 5;
          border: 1px solid #999;
          background: #fff;
        }
        h2 {
          font-size: 22px;
          margin: 0 0 5px 0;
        }
        ul {
          list-style-type: none;
          padding: 0;
          margin: 0;
          height: 321px;
          width: 200px;
          overflow-y: scroll;
        }
        li {
          background-color: #f1f1f1;
          padding: 10px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        li:nth-child(odd) {
          background-color: #fcfcfc;
        }
        #more {
          width: 100%;
          margin: 5px 0 0 0;
        }
      </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
        
        <script>
            var map, placesList;
            var geocoder;

            var citymap = {};
            var cityCircle;

            function initialize() {
              var info = document.getElementById('hidden').value;
              //alert(info);
              var datos = info.split('#');
              geocoder = new google.maps.Geocoder();

              var pyrmont = new google.maps.LatLng(40.439108,-3.681133);

              map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: pyrmont,
                zoom: 17
              });

              var request = {
                location: pyrmont,
                radius: 500,
                types: ['food']
              };
              
              for(var i=0;i<4;i++){
                  //array.push(4);
                  //alert(datos[i]);
                  geocoder.geocode( { 'address': datos[i]}, function(results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                       citymap[i] = {
                        center: new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()),
                        population: 789300
                      }; 
                      //alert(datos[i]);
                    } else {
                      alert("Geocode was not successful for the following reason: " + status);
                    }
                  });
              }  
              
              placesList = document.getElementById('places');
              
              var service = new google.maps.places.PlacesService(map);
              service.nearbySearch(request, callback);
              
              for (var city in citymap) {
                var populationOptions = {
                  strokeColor: '#FF0000',
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: '#FF0000',
                  fillOpacity: 0.35,
                  map: map,
                  center: citymap[city].center,
                  radius: citymap[city].population / 20
                };
                // Add the circle for this city to the map.
                cityCircle = new google.maps.Circle(populationOptions);
              }
            }

            function callback(results, status, pagination) {
              if (status != google.maps.places.PlacesServiceStatus.OK) {
                return;
              } else {
                createMarkers(results);

                if (pagination.hasNextPage) {
                  var moreButton = document.getElementById('more');

                  moreButton.disabled = false;

                  google.maps.event.addDomListenerOnce(moreButton, 'click',
                      function() {
                    moreButton.disabled = true;
                    pagination.nextPage();
                  });
                }
              }
            }

            function createMarkers(places) {
              var bounds = new google.maps.LatLngBounds();

              for (var i = 0, place; place = places[i]; i++) {
                var image = {
                  url: place.icon,
                  size: new google.maps.Size(71, 71),
                  origin: new google.maps.Point(0, 0),
                  anchor: new google.maps.Point(17, 34),
                  scaledSize: new google.maps.Size(25, 25)
                };

                var marker = new google.maps.Marker({
                  map: map,
                  icon: image,
                  title: place.name,
                  position: place.geometry.location
                });

                placesList.innerHTML += '<li>' + place.name + '</li>';

                bounds.extend(place.geometry.location);
              }
              map.fitBounds(bounds);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
    <body>
        <div id="map-canvas"></div>
        <div id="results">
          <h2>Results</h2>
          <ul id="places"></ul>
          <button id="more">More results</button>
        </div>
        <input id="hidden" type="text" name="hidden" value="<%= Controlador.GetInstance().getS_ZipcodesCercanosByUsuario() %>" style="display: none">
    </body>
</html>
